<template>
  <app-module>
    <div slot="top" class="app-service-center-content-topic__top">
      <div class="app-service-center-content-topic__top__title-wrapper">
        <div class="app-service-center-content-topic__top__title-wrapper__title">微专题</div>
      </div>
      <div class="app-service-center-content-topic__top__input-wrapper">
        <!--<t-input size="mini" place-holder="检索" @input="handleFilter"></t-input>-->
        <!--<t-progress-bar :percent="100"></t-progress-bar>-->
      </div>
    </div>
    <t-table slot="center" :items="store.topics" size="normal" border stripe>
      <t-table-column label="编号" prop="id" width="2"></t-table-column>
      <t-table-column label="名称" prop="name" width="10"></t-table-column>
      <t-table-column label="今日番茄" prop="date" width="2"></t-table-column>
      <t-table-column label="功能" prop="action" width="4">
        <template slot-scope="scope">
          <t-button type="primary" size="small" @click="initXmap(scope)">导图</t-button>
          <t-button type="primary" size="small" @click="openUpdateDialog(scope)">管理</t-button>
        </template>
      </t-table-column>
    </t-table>
    <div slot="bottom" class="app-service-center-content-topic__bottom">
      <div class="app-service-center-content-topic__bottom__btn-wrapper">
        <t-button type="insert" size="normal" @click="openCreateDialog">添加专题导图</t-button>
      </div>
    </div>
    <div slot="other">
      <topic-create-dialog :store="store" @close="closeCreateDialog"></topic-create-dialog>
      <topic-update-dialog :store="store" @close="closeUpdateDialog"></topic-update-dialog>
    </div>
  </app-module>
</template>

<script>
  import TButton from '@/components/button';
  import TProgressBar from '@/components/progress-bar';
  import AppModule from '@/app/service/center/content/module';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  import _ from 'lodash';
  import TopicCreateDialog from '@/app/service/center/content/topic/create-dialog';
  import TopicUpdateDialog from '@/app/service/center/content/topic/update-dialog';

  export default {
    name: 'app-service-center-content-topic',
    components: {
      TButton,
      TProgressBar,
      TTable,
      TTableColumn,
      AppModule,
      TopicCreateDialog,
      TopicUpdateDialog,
    },
    data() {
      return {
        store: {
          topics: [],
          current: {
            item: null,
            input: {
              name: '',
              synopsis: '',
            },
          },
          createDialog: {
            title: '',
            visible: false,
          },
          updateDialog: {
            title: '',
            visible: false,
          },
        },
      };
    },
    created() {
      this.store.topics = [];
      this.initTopic();
    },
    watch: {
      /* eslint-disable object-shorthand */
      '$route'() {
        this.store.topics = [];
        this.initTopic();
      },
    },
    methods: {
      initTopic() {
        const target = 'api/accounts/topics';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
        }).catch(() => {
        });
      },
      initXmap(scope) {
        this.$router.push({ path: `/toolbox/xmap/topic/${scope.item.id}` });
      },
      init(payload) {
        Object.values(payload).forEach((item) => {
          const updateDate = this.dateFormat(item.updateTime);
          const createDate = this.dateFormat(item.createTime);
          const index = this.store.topics.length + 1;
          this.store.topics.push({
            index,
            name: item.name,
            tomatoInfo: `${item.todayTomatoAmount} 颗番茄`,
            createDate,
            id: item.id,
            synopsis: item.synopsis,
            updateDate,
            tomatoAmount: item.tomatoAmount,
            todayTomatoAmount: item.todayTomatoAmount,
          });
        });
      },
      openCreateDialog() {
        this.store.createDialog.title = '微专题创建';
        this.store.createDialog.visible = true;
      },
      openUpdateDialog(scope) {
        this.store.updateDialog.title = '微专题管理';
        this.setCurrentItem(scope.item.id);
        this.store.updateDialog.visible = true;
      },
      closeCreateDialog() {
        this.store.createDialog.visible = false;
        this.finalizeDialog();
      },
      closeUpdateDialog() {
        this.store.updateDialog.visible = false;
        this.finalizeDialog();
      },
      finalizeDialog() {
        this.store.createDialog.title = '';
        this.store.updateDialog.title = '';
        this.clearCurrentItem();
      },
      setCurrentItem(id) {
        this.store.current.item = this.store.topics.filter((item) => {
          if (item.id === id) {
            this.store.current.input.name = item.name;
            this.store.current.input.synopsis = item.synopsis;
            return item;
          }
          return null;
        })[0];
      },
      clearCurrentItem() {
        this.store.current.item = null;
        this.store.current.input.name = '';
        this.store.current.input.synopsis = '';
      },
      dateFormat(ut) {
        const day = ut.dayOfMonth;
        const dayValue = day < 10 ? `0${day}` : `${day}`;
        return `${ut.year}-${ut.monthValue}-${dayValue}`;
      },
      handleFilter(val) {
        if (!this.filter) {
          this.filter = _.debounce((re) => {
            this.store.maps = this.store.orimaps.filter((item) => {
              if (re) {
                const reg = new RegExp(`^.*${re}.*$`, 'gi');
                return reg.test(item.name);
              }
              return true;
            });
          }, 500);
        }
        this.filter(val);
      },
    },
  };
</script>

<style scoped="scoped">
</style>
